<template>
  <div class="background-wrap" clearfix>
    <div class="student-profile">
      <h2 class="title">个人信息</h2>
      <el-form :model="myform" ref="form1" label-width="120px">
        <el-form-item label="姓名" prop="name2">
          <el-input name="name1" v-model="myform.name"></el-input>
        </el-form-item>
        <el-form-item name="id1" label="ID" prop="id2">
          <el-input disabled v-model="myform.id"></el-input>
        </el-form-item>
        <el-form-item name="gender1" label="性别" prop="gender2">
          <el-radio-group v-model="myform.gender">
            <el-radio label="男">男</el-radio>
            <el-radio label="女">女</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item name="email1" label="Email" prop="email2">
          <el-input v-model="myform.email"></el-input>
        </el-form-item>
        <el-form-item name="phone1" label="联系电话" prop="phone2">
          <el-input v-model="myform.phone"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="edit" v-if="!editing">编辑</el-button>
          <el-button type="primary" @click="submitForm" v-if="editing">保存</el-button>
          <el-button @click="cancelEdit" v-if="editing">取消</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      editing: false,
      myform: {
        name: '',
        id: '',
        gender: '',
        email: '',
        phone: ''
      },
      rules: {
        name2: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
        email2: [{ required: true, message: '请输入Email', trigger: 'blur' }],
        phone2: [{ required: true, message: '请输入联系电话', trigger: 'blur' }]
      }
    };
  },
  computed: {
  },
  mounted() {
    this.getUserInfo();
  },
  methods: {
    
    getUserInfo() {
      // 获取用户信息并更新表单数据
      this.myform.name = this.$store.state.name;
      this.myform.id = this.$store.state.id;
      this.myform.gender = this.$store.state.gender;
      this.myform.email = this.$store.state.email;
      this.myform.phone = this.$store.state.phone;
    },
    edit() {
      this.editing = true;
    },
    cancelEdit() {
      this.editing = false;
      this.getUserInfo();
    },
    submitForm() {
      this.$refs.form1.validate(valid => {
        if (valid) {
          // 向后端提交表单数据并更新用户信息
          this.editing = false;
          const that=this;
          axios
            .post("http://localhost:8084/update",this.myform)
            .then(function(resp){
              if(resp.data == 'cannot'){
                that.$message.error("修改失败");
              }
              else{
                that.$message.success("修改成功");
                that.$router.push({ path: "/personal" });
                that.$store.commit("updateUserId",that.myform.id);
                that.$store.commit("updateUserName",that.myform.name);
                that.$store.commit("updateUserEmail",that.myform.email);
                that.$store.commit("updateUserPhone",that.myform.phone);
                that.$store.commit("reUserGender",that.myform.gender);
                console.log(that.$store.state);
              }
            });
        }
      });
    }
  }
};
</script>

<style scoped>
.background-wrap {
  background-size: cover;
  background-position: center;
  position: fixed;
  top: 0;
  left: 200;
  width: 100%;
  height: 100%;
}

.student-profile {
  margin: 0;
  padding: 50px 50px 50px 200px;
  max-width: 800px;
}

.title {
  margin-bottom: 30px;
  font-size: 32px;
  color: #000000;
  text-align: center;
  text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.3);
}

.el-form-item__label {
  font-size: 16px;
  color: #fff;
  line-height: 36px;
}

.el-form-item__content {
  font-size: 16px;
}

.el-button {
  font-size: 16px;
  margin-right: 10px;
}

.el-radio {
  font-size: 16px;
}

.el-input__inner {
  font-size: 16px;
}

.el-form-item__error {
  font-size: 14px;
  color: #f56c6c;
  margin-top: 5px;
}

.el-form-item.is-error .el-form-item__label {
  color: #f56c6c;
}

.el-button--primary {
  background-color: #409EFF;
  border-color: #409EFF;
}

.el-button--primary:hover {
  background-color: #66B1FF;
  border-color: #66B1FF;
}

.el-button--primary:focus {
  box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.2);
}

.el-input {
  margin-right: 20px;
  width: 350px;
}

@media (max-width: 767px) {
  .el-form-item__label {
    width: 100%;
    text-align: left;
  }

  .el-input {
    margin-right: 0;
    width: 100%;
  }
}
</style>